<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./vue.js"></script>
</head>
<body>
    <div id="app">
        <p>我是APP层</p>
        <p>{{message}}</p>

        <p v-for="item,key,index in result">{{item}}</p>

        <hr />
        <my-component @event="changeUp" :message="message">  <!--  @event 自定义事件接收广播上来的数据 触发 changeUp 函数  -->
            <p>我是插入进来的(默认的没有名字)</p>
            <p slot="abc">这个是有名字的 slot</p>
        </my-component>

        <my-news :message='message' @meevent="change" :abc="abc"></my-news>
    </div>
    <script type="text/x-template" id="template01">
        <div>
            <p>这是我的一个子组件 ： {{me}}</p>
            <p>{{newMsg}}</p>
            <button @click="change">改变了</button>
        </div>
    </script>
    <script>
        Vue.component('my-component',{
            template:`
                <div style="width:100%;height:auto;overflow:hidden;padding:10px;background:#c4c4c4;">
                    {{msg}}
                    <slot>
                        <p>这里没有插入进来的模板</p>
                    </slot>
                    <slot name="abc">
                        <p>这里没有插入进来的模板</p>
                    </slot>
                    <p style="padding-left:20px;">{{me}}</p>
                    <input v-model="me"/>
                    <button @click="toup">change</button>
                </div>
            `,  
            props:['message'],
            data(){
                return {
                    msg:'123456',
                    me:this.message
                }
            },
            methods:{
                toup(){
                    this.$emit('event',this.me);  // $emit 向上广播自定义事件 event 传递数据 this.me;
                }
            }
        })
        let vm = new Vue({
            el:"#app",
            data:{
                message:'我是父级的数据',
                abc:'这是一个新的数据',
                result:{},
            },
            methods:{
                changeUp(parms){
                    // console.log(parms);
                    this.message = parms;
                },
                change(parms){
                    this.result = parms;
                    // console.log(parms);
                }
            },
            computed:{

            },
            components:{
                'my-news':{
                    template:'#template01',
                    props:['message','abc'],
                    data(){
                        return {
                            msg:'abcdefg',
                            me:this.message,
                            newMsg:this.abc,
                        }
                    },
                    methods:{
                        change(){
                            this.$emit('meevent',{
                                msg:this.msg,
                                me:this.me,
                                newMsg:this.newMsg
                            })
                        }
                    }
                }
            }
        })
    </script>
</body>
</html>